<template>
	<view class="u-page">
		<view class="me_info">
			<view class="me_avatar">
				<u-avatar :src="src" mode="circle" size="large" @click="getUserInfo"></u-avatar>
			</view>
			<view class="me_detail">
				<view class="me_money">
					<view class="text-lg" style="margin-bottom: 10rpx;">{{time}}</view>
					<view class="text-xs">会员有效期</view>
				</view>
				<view class="me_money">
					<view class="text-lg" style="margin-bottom: 10rpx;">{{jd}}</view>
					<view class="text-xs">金豆</view>
				</view>
			</view>
		</view>
		<view class="cu-bar bg-white solid-bottom card_title">
			<view class="action">
				<text class="cuIcon-titles text-blue"></text> 个人服务
			</view>
		</view>
		<view class="cu-list grid my_card col-4 no-border">
			<view class="cu-item">
				<view class="cuIcon-servicefill text-purple" @click=""></view>
				<view @click="">客服</view>
			</view>
			<view class="cu-item">
				<navigator url="./me_info" hover-class="none">
					<view class="cuIcon-formfill text-mauve"></view>
					<view>个人信息</view>
				</navigator>
			</view>
			<view class="cu-item">
				<navigator url="../vip/vip" hover-class="none">
					<view class="cuIcon-rechargefill text-yellow"></view>
					<view>会员</view>
				</navigator>
			</view>
			<view class="cu-item">
				<navigator url="../record/record" hover-class="none">
					<view class="cuIcon-writefill text-purple"></view>
					<view>个人记录</view>
				</navigator>
			</view>
			<!-- <view class="cu-item">
				<navigator url="../login/login" hover-class="none">
					<view class="cuIcon-myfill text-pink"></view>
					<view>登入</view>
				</navigator>
			</view> -->
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return{
				src: '',
				jd:'',
				time:''
			}
		},
		onReady() {
			this.src=this.jcs_user.avatar;
			this.init();
		},
		methods:{
			more_func(){
				this.$refs.uToast.show({
					title: '更多功能敬请期待'
				})
			},
			init(){
				this.$H.get("/homeapi/user",{},{}).then(res=>{
					let user = res.data.userinfo
					this.jd = user.money;
					this.time = user.level_duedate_text==='0'?'未开通':user.level_duedate_text;
				}).catch(err=>{
					uni.showToast({
						title: '请稍后重试获取',
						icon:'none',
						duration: 2000
					});
				})
			},
			getUserInfo(){
				let that = this;
				uni.getUserProfile({
					desc:'获取头像',
					success:(info)=>{
						this.src=info.userInfo.avatarUrl;
						that.$H.post("/homeapi/changeAvatar",{avatar:this.src,username:info.userInfo.nickName},{}).then(res=>{
							let userinfo = res.data.userinfo
							let user = {avatar: userinfo.avatar,phone: userinfo.mobile,email: userinfo.email}
							this.$u.vuex('jcs_user', user)
						}).catch(err=>{
							/* uni.showToast({
								title: '请稍后重试获取',
								icon:'none',
								duration: 2000
							}); */
						})
					},
					error:(err)=>{
						/* uni.showToast({
						    title: '稍后重试',
							icon:'none',
						    duration: 2000
						}); */
					}
				})
			}
		}
	}
</script>

<style>
	.me_info{
		display: flex;
		/* justify-content: center; */
		align-items: center;
		padding:50rpx;
		background-color: #2979ff;
		color: #FFFFFF;
		flex-direction: column;
	}
	.me_login{
		margin-left: 10px;
	}
	.me_login button{
		width: 60px;
	}
	.me_detail{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		width: 100%;
	}
	.me_avatar{
		margin-bottom: 30rpx;
	}
	.me_money{
		text-align: center;
	}
</style>
